<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh">
<head>

	<jsp:include page="/commonPages/admin-meta.jsp" flush="true" />
	<!-- CSS files -->
	<jsp:include page="/commonPages/admin-style.jsp" flush="true" />
	<style type="text/css">
	#map {
	position: absolute;
	
	width: 85%;
	height: 90%;
	border: 1px solid #3473b7;
}
#map_text1 {
	top: 0px;
	left:0px;
	position: absolute;
	width: 60%;
	height: 100%;
}
	

#map1 {
	top: 20px;
	left:0px;
	position: absolute;
	width: 100%;
	height: 100%;
}

#map2 {
	position: absolute;
	top: 20px;
	right:0px;
	width:40%;
	height:50%;
	float:right
}

#map3 {
	position: absolute;
	
	right:0px;
	width:40%;
	height:50%;
	float:right;
	
	bottom:0px;
}

#text1 {
    position: absolute;
	top: 0px;
	right:0px;
    float:right
	
}

#text2 {
    position: absolute;
	top: 423px;
	right:0px;
    float:right
	
}
#text3 {
    position: absolute;
	top: 0px;
	right:0px;
    float:right
	
}
.win_bg {
	background: #CCC;
	opacity: 0.2;
	filter: alpha(opacity = 20);
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 998;
}

.winTitle {
	background: #4192c9;
	height: 20px;
	line-height: 20px;
	position:relative;
}

.winTitle .title_left {
	font-weight: bold;
	color: #FFF;
	padding-left: 5px;
	float: left
}

.winTitle .title_right {
	float: right;
	padding-right: 3px;
}

.winTitle .title_right a {
	color: #FFF;
	text-decoration: none;
	padding-right: 3px;
}

.winTitle .title_right a:hover {
	text-decoration: underline;
	color: #FF0000;
	padding-right: 3px;
}

.transferPreference {
	border: 1px solid #D6E3F1;
	height: 20px;
	margin: 1px 30%;
	padding: 0 12px;
}

.winContent {
	padding: 5px;
	overflow-y: auto;
	height: 550px;
}

.popupWindow {
	left: 0px;
	top: 0px;
	position: absolute;
	width: 0px;
	height: 0px;
	border: 2px solid #D6E3F1;
	background: #FFF;
	z-index: 9999;
}
</style>
	<script src="./libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
    var map4, map5, map6,layerWorld1,layerWorld2,layerWorld3,control;
    var url1 = "http://222.25.188.1:50118/iserver/services/map-SJK/rest/maps/城镇总体规划拼合图";
	var url2 = "http://222.25.188.1:50118/iserver/services/map-SJK/rest/maps/2020年城镇开发边界划定图";
	var url3 = "http://222.25.188.1:50118/iserver/services/map-SJK/rest/maps/城镇总体规划拼合图";
	var SubName = ["2020年城镇开发边界划定图","2030年城镇开发边界划定图","2020年产业园区控制线划定图","2030年产业园区控制线划定图","2020年永久基本农田保护控制线划定图",
	               "2030年永久基本农田保护控制线划定图","生态保护红线划定方案图","生态保护红线分级管控图","基础设施廊道控制线划定图","文物古迹保护控制线划定图","空间管制规划图"];
	function init() {
		
		 GetMapService();
		 $("#popupWin").css("display", "none");
			show1();
		
		
		
	}

	
	
	//从iServer中读取地图列表信息
	
	function GetMapService(){
		
		var url1 = "http://222.25.188.1:50118/iserver/services/map-SJK/rest/maps"
		var MyMapService = new SuperMap.REST.MapService(url1);
		MyMapService.events.on({
			"processCompleted": MapServiceCompleted,
			"processFailed":MapServiceFailed,
		});
		MyMapService.processAsync();
	}
	var SubMap = new Array();
	var SubUrl = new Array();
	function MapServiceCompleted(MapServiceEventArgs) {
		 var result =MapServiceEventArgs.originResult; 
		 
		 if (result) {
			
						//alert(getMapServiceEventArgs.result.name);
						for (var j = 0; j < result.length; j++){ 
							SubMap.push(result[j].name);
							SubUrl.push(result[j].path);
						}
					
				}
		 	
			//alert(SubMap[0]);
			installMap(SubMap,SubUrl);
			
			}
	function show1(){
		$("#popupWin").css("display", "none");
		
	}
	function installMap(SubMap,SubUrl) {

		map4 = new SuperMap.Map("map1");
		map5 = new SuperMap.Map("map2");
		map6 = new SuperMap.Map("map3");
		//初始化简易缩放控件类
		
		
		
		map4.events.on({"mousemove":getMousePositionPx1});//鼠标在地图上移动时被触发
		map5.events.on({"mousemove":getMousePositionPx2});//鼠标在地图上移动时被触发
		map6.events.on({"mousemove":getMousePositionPx3});//鼠标在地图上移动时被触发
		map4.events.on({"move":getzoom1});//鼠标在地图上移动时被触发
		map5.events.on({"move":getzoom2});//鼠标在地图上移动时被触发
		map6.events.on({"move":getzoom3});//鼠标在地图上移动时被触发
		

		//map4.events.on({"mouseover":setMap});//鼠标移至地图上时被触发
	

		layerWorld1 = new SuperMap.Layer.TiledDynamicRESTLayer("World", url1); //获取图层服务地址
		layerWorld2 = new SuperMap.Layer.TiledDynamicRESTLayer("World", url2); //获取图层服务地址
		layerWorld3 = new SuperMap.Layer.TiledDynamicRESTLayer("World", url3); //获取图层服务地址

		layerWorld1.events.on({
			"layerInitialized" : addLayer1
		});
		layerWorld2.events.on({
			"layerInitialized" : addLayer2
		});
		layerWorld3.events.on({
			"layerInitialized" : addLayer3
		});
		var layersList = "";
		
		for (var i = 0; i < SubMap.length; i++) {
			
				for(var j =0;j<SubName.length;j++){
					if(SubName[j].indexOf(SubMap[i])>-1){
						layersList += '<a id = "m"  ;href = "javascript:void(0)" ; onclick = "ShowMap(\''+SubUrl[i]+'\')";style="line-height: 28px; display: block">'
						+ SubMap[i]+'<br>' + '</label>'+'</a>';
					}						
				}		
		}
		
		
		
	}
	//图层选择框
	
	 function createSelect(name, str){  
        var _select = document.createElement("select");  
        var firstOption = document.createElement("option");  
        firstOption.value = "-select-";  
        firstOption.text = "基础设施廊道控制线划定图";  
        _select.appendChild(firstOption); 
        _select.style.width = "150px";
        
        for ( i = 0; i < str.length; i++){  
            var _option = document.createElement("option");  
            _option.value = str[i];  
            _option.text = str[i];  
            if (name == str[i]){  
                _option.selected = "true";  
            }  
            _select.appendChild(_option);  
        } 
       
        //_select.onchange = ShowMap2();
        return _select;  
        
    }  
	
	//下拉框选中地图实现跳转
	
	function selectChange(object){
		
	}
	
	function ShowMap(mapurl){
		
		 if(mapurl){
				mapurl = decodeURI(mapurl);
				//alert(mapurl);
				
				 if(layerWorld1!=null){
				 map4.removeLayer(layerWorld1);
				 layerWorld1 = new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl);
				 layerWorld1.events.on({"layerInitialized":addLayer1});
				 layerWorld1.redraw();
				 }
			 } 
		 
		 
	}
	function ShowMap2(){
		
	}
	function showWindow(winMessage) {
		
		$("<div id='popupWin'></div>").addClass("popupWindow").appendTo(
				$("#result"));
	
	
	var str = "";
	str += '<div class="winTitle" onMouseDown="startMove(this,event)" onMouseUp="stopMove(this,event)"><span class="title_left">资源目录 </span><span class="title_right"><a href="javascript:close()" title="关闭窗口">关闭</a></span><br style="clear:left"/></div>'; //标题栏

	str += '<div class="winContent" style="overflow-y:auto;height:0px;">';
	str += winMessage;
	str += '</div>';
	$("#popupWin").html(str);
	document.getElementById("popupWin").style.width = "0px";
	document.getElementById("popupWin").style.height = "0px";
}
window.close = function() {
	$("#popupWin").css("display", "none");
	
}
window.startMove = function(o, e) {
	var wb;
	if (SuperMap.Browser.name === "msie" && e.button === 1)
		wb = true;
	else if (e.button === 0)
		wb = true;
	if (wb) {
		var x_pos = parseInt(e.clientX - o.parentNode.offsetLeft);
		var y_pos = parseInt(e.clientY - o.parentNode.offsetTop);
		if (y_pos <= o.offsetHeight) {
			document.documentElement.onmousemove = function(mEvent) {
				var eEvent = (SuperMap.Browser.name === "msie") ? event
						: mEvent;
				o.parentNode.style.left = eEvent.clientX - x_pos + "px";
				o.parentNode.style.top = eEvent.clientY - y_pos + "px";
			}
		}
	}
}
window.stopMove = function(o, e) {
	document.documentElement.onmousemove = null;
}
	//添加地图图层、鹰眼控件到map
	function addLayer1() {
		map4.zoomTo(10);
		map4.addLayers([ layerWorld1 ]);		
		map4.setCenter(new SuperMap.LonLat(37424952.75 , 4085429.08 ),1);

	}
	//添加地图图层、鹰眼控件到map
	function addLayer2() {
		map5.addLayers([ layerWorld2 ]);
		map5.setCenter(new SuperMap.LonLat(37424955 , 4085429 ),1);
	}
	//添加地图图层、鹰眼控件到map
	function addLayer3() {
		map6.addLayers([ layerWorld3 ]);
		map6.setCenter(new SuperMap.LonLat(37424952.75 , 4085429.08 ), 1);
	}
	function getMousePositionPx1(evt){
		//alert(map4.getCenter());
		//使图6、图5和图4保持相同的zhong'xin'dian
		
		map6.setCenter(map4.getCenter());
		map5.setCenter(map4.getCenter());
		}
	function getMousePositionPx2(evt){
		//alert(map4.getCenter());
		//使图6、图5和图4保持相同的zhong'xin'dian
		map6.setCenter(map5.getCenter());
		map4.setCenter(map5.getCenter());
		}
	function getMousePositionPx3(evt){
		//alert(map4.getCenter());
		//使图6、图5和图4保持相同的zhong'xin'dian
		map4.setCenter(map6.getCenter());
		map5.setCenter(map6.getCenter());
		}
	function getzoom1(evt){
		//alert(map4.getCenter());
		//使图6、图5和图4保持相同的zhong'xin'dian
		
		map6.zoomTo(map4.getZoom());
		map5.zoomTo(map4.getZoom());
		}
	function getzoom2(evt){
		//alert(map4.getCenter());
		//使图6、图5和图4保持相同的zhong'xin'dian
		
		map4.zoomTo(map5.getZoom());
		map6.zoomTo(map5.getZoom());
		}
	function getzoom3(evt){
		//alert(map4.getCenter());
		//使图6、图5和图4保持相同的zhong'xin'dian
		
		map4.zoomTo(map6.getZoom());
		map5.zoomTo(map6.getZoom());
		}
	function MapServiceFailed(){}
    </script>
</head>
<body onload="init()">
	<div id="wrapper">

		<!-- Navigation -->
		<jsp:include page="/commonPages/admin-navigator.jsp" flush="true" />
		
	
        <div id="page-wrapper">
        <div id='result' class='container'></div>
	<div id = "tool">
	<button onclick ="createPrintMap('map')" class= "button1" title = "导出" style = " width :20px;height:20px;border:0;background:url('./img/Out.png') no-repeat left top"></button>
	<button class= "button1" title = "打印" style = " width :20px;height:20px;border:0;background:url('./img/P.png') no-repeat left top"></button>
	<input  type =button onclick = "showLayer()" title = "图层管理器" style = " width :20px;height:20px;border:0;background:url('./img/Layer.png') no-repeat left top">
	<input  type =button onclick = "showLayer()" title = "三视图" style = " width :20px;height:20px;border:0;background:url('./img/Layer.png') no-repeat left top">
	</div>
	<div id = "map">
			<div id = "map_text1">
			<div id = "text1">图层名称:
			
			<script>  
    document.getElementById("text1").appendChild(createSelect('', SubName));
    
   
    var button = document.createElement("input");
    document.getElementById("text1").appendChild(button);
    button.type = "button";
    button.value = "";
    button.style.width = "20px";
    button.style.height = "20px"
    button.style.background = "url('./img/shuaxin.png')"
    
    button.onclick = function(){
    	var map1url = $('#text1 option:selected()').text();
		 if(map1url){
				map1url = "http://222.25.188.1:50118/iserver/services/map-SJK/rest/maps/"+map1url;
				map1url = decodeURI(map1url);
				
				 if(layerWorld1!=null){
				 map4.removeLayer(layerWorld1);
				 layerWorld1 = new SuperMap.Layer.TiledDynamicRESTLayer("World", map1url);
				 layerWorld1.events.on({"layerInitialized":addLayer1});
				 layerWorld1.redraw();
				 }
			 } 
        
    }
          </script>  
			
			</div>
			
           <div id="map1">
			
			</div>
			</div>
			
			<div id = "text3">图层名称:
			
			<script>  
    document.getElementById("text3").appendChild(createSelect('', SubName));
    
   
    var button = document.createElement("input");
    document.getElementById("text3").appendChild(button);
    button.type = "button";
    button.value = "";
    button.style.width = "20px";
    button.style.height = "20px"
    button.style.background = "url('./img/shuaxin.png')"
    
    button.onclick = function(){
    	var map2url = $('#text1 option:selected()').text();
		 if(map2url){
				map2url = "http://222.25.188.1:50118/iserver/services/map-SJK/rest/maps/"+map2url;
				map2url = decodeURI(map2url);
				
				 if(layerWorld2!=null){
				 map5.removeLayer(layerWorld2);
				 layerWorld2 = new SuperMap.Layer.TiledDynamicRESTLayer("World", map2url);
				 layerWorld2.events.on({"layerInitialized":addLayer2});
				 layerWorld2.redraw();
				 }
			 } 
        
    }
          </script>  
			
			</div>
			
			<div id = "map2">
			
			</div>
			<div id = "text2">图层名称:
			
			
			<script>  
			document.getElementById("text2").appendChild(createSelect('', SubName));
		    
			   
		    var button = document.createElement("input");
		    document.getElementById("text2").appendChild(button);
		    button.type = "button";
		    button.value = "";
		    button.style.width = "20px";
		    button.style.height = "20px"
		    button.style.background = "url('./img/shuaxin.png')"
		    
		    button.onclick = function(){
		    	var map3url = $('#text2 option:selected()').text();
				 if(map3url){
						map3url = "http://222.25.188.1:50118/iserver/services/map-SJK/rest/maps/"+map3url;
						map3url = decodeURI(map3url);
						
						 if(layerWorld3!=null){
						 map6.removeLayer(layerWorld3);
						 layerWorld3 = new SuperMap.Layer.TiledDynamicRESTLayer("World", map3url);
						 layerWorld3.events.on({"layerInitialized":addLayer3});
						 layerWorld3.redraw();
						 }
					 } 
		        
		    }
    
      
          </script> 
          </div>
			<div id="map3"></div>
			 	
			
            
            
        </div>
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->
	
	<!-- JS files -->
    <jsp:include page="/commonPages/admin-script.jsp" flush="true" />
</body>
</html>